<template>
    <div id="cart-control">
        <transition>
					<span class="decrease icon-remove_circle_outline" v-show="food.count && food.count > 0" @click.stop="remove($event)"></span>
				</transition>
        <span class="count" v-show="food.count && food.count > 0">{{food.count}}</span>
        <span class="increase icon-add_circle"  @click.stop="add($event)"></span>
    </div>
</template>

<script>
import Vue from "vue";

export default {
  name: "cartControl",
  props: {
    food: {
      type: Object
    }
  },
  methods: {
    /**
     * 这里我们对数据进行操作，就是想原生的data(food)当中添加了count属性,这种操作,需要注意一下
     */
    // 绑定一个btter-scroll插件,判断点击是scroll上面的点击事件，还是原生的，如果是better-scroll才执行
    add($event) {
			// console.log(111);
			// this.food.count ++;
      if ($event._constructed) {
        if (!this.food.count) {
          // （在data(json)当中没有count相关的数据）
          Vue.set(this.food, "count"); // 为数据当中的data添加一个count属性
          this.food.count = 1;				 // 并且將它設置為1
        } else {
          this.food.count ++;					 
        }
      }
    },
    remove($event) {
      if ($event._constructed) {
        if (this.food.count === 0) {
          return;
        } else {
          this.food.count--;
        }
      }
    }
  }
};
</script>

<style lang="stylus" ref="stylesheet/stylus">
@import '../assets/stylus/index.styl';

#cart-control {
	font-size: 0; // 去除行内元素之间的间隙
	.icon-remove_circle_outline, .icon-add_circle {
		display: inline-block;
		font-size: 24px;
		width: 24px;
		height: 24px;
		line-height: 24px;
	}

	.decrease, .increase { // 这两个class用来切换
		padding: 6px;
		dislay: inline-block;
		line-height: 24px;
		color: #00a0dc;
		font-size: 24px;
		// vertical-align middle
	}

	.count {
		display: inline-block;
		text-align: center;
		font-size: 10px;
		width: 12px;
		color: rgb(147, 153, 159);
		line-height: 36px; // decrease添加了padding所以这里的行高也增加
		vertical-align: top;
	}
	.v-enter {
		transform: translateX(36px) rotate3d(0, 0, 1, 0deg);
	} 
	.v-enter-to {
		transform: translateX(0px) rotate3d(0, 0, 1, -180deg);
	}
	/*组件刚要离开的状态*/
	.v-leave {
		transform: translateX(0px) rotate3d(0, 0, 1, 0deg);
	}
	/*离开到哪儿*/
	.v-leave-to {
		transform: translateX(36px) rotate3d(0, 0, 1, 180deg);
	}
	/*怎么离开的*/
	.v-leave-active {
		transition: all .5s ease-in-out;
	}
	.v-enter-active {
		transition: all .5s ease-in-out;
	}
}
</style>
